<template>
  <div>
    <!--模糊查询-->
    <el-form :inline="true" :model="pageData" class="demo-form-inline">
      <el-form-item label="链接名称：">
        <el-input v-model="pageData.linkName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="pageData.statusId" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="禁用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="reformdata"><i class="el-icon-refresh"></i>重置</el-button>
        <el-button type="primary" @click="addData()"><i class="el-icon-circle-plus-outline"></i>添加</el-button>
      </el-form-item>
    </el-form>

    <!--添加-->
    <el-dialog title="操作页面" :visible.sync="dialogFormVisible" @close="reform('form')" width="35%">

      <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm" label-width="120px">
        <el-form-item label="链接地址" :label-width="formLabelWidth" prop="linkUrl">
          <el-input v-model="form.linkUrl" autocomplete="off" style="width: 80%;" placeholder="请输入链接地址"></el-input>
        </el-form-item>
        <el-form-item label="链接名称" :label-width="formLabelWidth" prop="linkName">
          <el-input v-model="form.linkName" autocomplete="off" style="width: 80%;" placeholder="请输入链接名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reform('form')">取 消</el-button>
        <el-button type="primary" @click="addform('form')">确 定</el-button>
      </div>

    </el-dialog>


    <!--表格-->
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="序号" width="100%"></el-table-column>
      <el-table-column prop="linkName" label="链接名称">
        <template slot-scope="scope">
          <el-link :href="scope.row.linkUrl" target="_blank">{{scope.row.linkName}}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="linkUrl" label="链接地址"></el-table-column>
      <!--<el-table-column prop="name" label="排序" width="250%"></el-table-column>-->
      <el-table-column prop="statusId" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.statusId"
            :active-value="1"
            :inactive-value="0"
            active-text="禁用"
            inactive-text="正常"
            active-color="#ff4949"
            inactive-color="#13ce66"
            @change="handleClose(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row)">
            <el-button size="mini" slot="reference" type="danger">删除</el-button>
          </el-popconfirm><!--@click="$router.push('/')"-->
          <!--<el-button size="mini" type="primary" @click="showDetail(scope.row)">专区课程</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="text-align: right;margin-top: 20px"
                   background
                   :current-page="pageData.current"
                   :page-count="pageData.pages"
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
                   :page-sizes="[4, 8, 12, 16]"
                   :page-size="pageData.size"
                   :total="total"
                   layout="total,sizes,prev,pager, next">
    </el-pagination>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "blogroll",
    inject: ['reload'],//注入app的reload方法
    data() {
      return {
        pageData:{
          current:1,
          pages:0,
          size:4,
          linkName: '',
          statusId: ''
        },
        total:0,
        formInline: {
          linkName: '',
          statusId: ''
        }, form: {
          id:'',
          linkName: '',
          linkUrl:'',
          statusId:0
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        tableData: [],
        value: true,
        rules: {
          linkName: [
            {required: true, message: '请输入链接名称', trigger: 'blur'}
          ],
          linkUrl: [
            {required: true, message: '请输入链接地址', trigger: 'blur'}
          ]
        }
      }
    }, created() {
      this.getdata();
    },
    methods: {
      //点击按钮跳转专区课程
      showDetail(row) {
        //this.$router.push({ path: '/b', query: { id: row.id }}) //带参跳转
        this.$router.push({path:'/'})
      },
      //获取数据
      getdata() {
        this.$axios.post("homepage/website-link/findAll",qs.stringify(this.pageData,this.formInline)).then(r=>{
          //alert(JSON.stringify(r.data))
          this.tableData=r.data.records;
          this.pageData.current=r.data.current;
          this.pageData.pages=r.data.pages;
          this.total=r.data.total;
        })
      },
      //模糊查询提交按钮
      onSubmit() {
        //alert(JSON.stringify(this.pageData))
        this.getdata();
      },
      //添加按钮
      addData() {
        Object.assign(this.$data.form, this.$options.data().form);
        this.dialogFormVisible = true;
      },
      //编辑方法
      handleEdit(row) {
        //alert(JSON.stringify(row))
        Object.assign(this.$data.form, this.$options.data().form);
        this.form=row;
        this.dialogFormVisible = true;
        //alert(JSON.stringify(this.form))
      },
      //删除方法
      handleDelete(row) {
        this.$axios.get("homepage/website-link/del/" + row.id).then(r => {
          if (r.data) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getdata();
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            });
            this.getdata();
          }
        })
      },
      //状态开关
      handleClose(done) {
        this.form=done;
        //alert(JSON.stringify(this.form));
        this.upddata();
      },
      //添加  编辑 表单
      addform(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.form.id == '') {
              this.$axios.post("homepage/website-link/addData",qs.stringify(this.form)).then(r => {
                if (r.data) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                  this.getdata();
                } else {
                  this.$message({
                    message: '添加失败',
                    type: 'warning'
                  });
                  this.getdata();
                }
              })
              this.dialogFormVisible=false;
              this.getdata();
            } else {
              //修改
              this.upddata();
              this.dialogFormVisible=false;
              this.getdata();
            }
          }
        });
      },
      //修改方法
      upddata(){
        //alert(JSON.stringify(this.form))
        this.$axios.post("homepage/website-link/updData",qs.stringify(this.form)).then(r=>{
          if (r.data) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getdata();
          } else {
            this.$message({
              message: '修改失败',
              type: 'warning'
            });
            this.getdata();
          }
        })
      },
      handleCurrentChange(currentPage){
        this.pageData.current=currentPage;
        this.getdata();
      },
      handleSizeChange(val){
        this.pageData.size=val;
        this.getdata();
      },
      //取消
      reform(formName) {
        this.$refs[formName].resetFields();
        Object.assign(this.$data.pageData, this.$options.data().pageData);
        this.dialogFormVisible=false;
        this.getdata();
      },reformdata(){
        Object.assign(this.$data.pageData, this.$options.data().pageData);
        this.getdata();
      }
    }
  }
</script>

<style scoped>
</style>
